<template>
  <div class="yinhuanxuncha content-wrapper">
    <div class="part-title">隐患巡查分析</div>
    <chart :config="config" />
  </div>
</template>

<script>
import chart from './chart'
import { randomNum, handleNumber } from '@/utils'
import { bridge } from '@/mixin'
export default {
  components: { chart },
  mixins: [bridge],
  data() {
    return {
      config: {
        xAxisData: ['社区1', '社区2', '社区3', '社区4', '社区5'],
        seriesData: {
          series_0: { name: '巡查合格数', data: [] },
          series_1: { name: '巡查不合格数', data: [] },
          series_2: { name: '发现率', data: [] },
          series_3: { name: '处置率', data: [] },
        },
        yAxis: [{
          min: 0,
          max: 1,
          interval: 0.2,
        }, {
          min: 0,
          max: 100,
          interval: 25,
          formatter: (value) => `${value}%`
        }]
      }
    }
  },
  methods: {
    refreshData() {
      const dataLength = this.config.xAxisData.length
      const resData = {
        series_0: randomNum({ max: 10000 }, dataLength),
        series_1: randomNum({ max: 10000 }, dataLength),
        series_2: randomNum({ max: 100 }, dataLength),
        series_3: randomNum({ max: 100 }, dataLength),
      }
      this.config.seriesData.series_0.data = resData.series_0
      this.config.seriesData.series_1.data = resData.series_1
      this.config.seriesData.series_2.data = resData.series_2
      this.config.seriesData.series_3.data = resData.series_3
      this.config.yAxis[0].max = handleNumber(Math.max(...resData.series_0, ...resData.series_1), 4)
      this.config.yAxis[0].interval = this.config.yAxis[0].max / 4
    }
  },
}
</script>

<style lang="scss" scoped>
.yinhuanxuncha {
  width: 79.5454rem;
  height: 21.6363rem;
  background-image: url('~@/views/screen-1/images/yinhuanxuncha.png');
  background-size: cover;
  background-position: center center;
}
</style>
